
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Otto DIY 机器人控制台</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
    <link href="css/mobile.css" rel="stylesheet">
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
        <div class="container-fluid">
            <a class="navbar-brand" href="#">
                <i class="fas fa-robot"></i> Otto DIY 控制台
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav ms-auto">
                    <li class="nav-item">
                        <a class="nav-link active" href="#dashboard">仪表盘</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#config">配置</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#control">控制</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#dances">舞步</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <div class="container-fluid mt-3">
        <!-- 状态仪表盘 -->
        <div id="dashboard" class="section">
            <h2><i class="fas fa-tachometer-alt"></i> 机器人状态</h2>
            <div class="row">
                <div class="col-md-3 col-sm-6 mb-3">
                    <div class="card status-card">
                        <div class="card-body text-center">
                            <i class="fas fa-battery-three-quarters fa-2x text-success"></i>
                            <h5 class="card-title mt-2">电量</h5>
                            <h3 id="battery-level" class="text-success">85%</h3>
                            <div class="progress mt-2">
                                <div id="battery-progress" class="progress-bar bg-success" style="width: 85%"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-3 col-sm-6 mb-3">
                    <div class="card status-card">
                        <div class="card-body text-center">
                            <i class="fas fa-thermometer-half fa-2x text-warning"></i>
                            <h5 class="card-title mt-2">温度</h5>
                            <h3 id="temperature" class="text-warning">25°C</h3>
                        </div>
                    </div>
                </div>
                <div class="col-md-3 col-sm-6 mb-3">
                    <div class="card status-card">
                        <div class="card-body text-center">
                            <i class="fas fa-volume-up fa-2x text-info"></i>
                            <h5 class="card-title mt-2">音量</h5>
                            <h3 id="volume-level" class="text-info">60%</h3>
                            <div class="progress mt-2">
                                <div id="volume-progress" class="progress-bar bg-info" style="width: 60%"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-3 col-sm-6 mb-3">
                    <div class="card status-card">
                        <div class="card-body text-center">
                            <i class="fas fa-walking fa-2x text-primary"></i>
                            <h5 class="card-title mt-2">运动模式</h5>
                            <h3 id="motion-mode" class="text-primary">待机</h3>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="row mt-3">
                <div class="col-md-6">
                    <div class="card">
                        <div class="card-header">
                            <i class="fas fa-wifi"></i> 连接状态
                        </div>
                        <div class="card-body">
                            <div class="d-flex justify-content-between align-items-center">
                                <span>Wi-Fi 连接</span>
                                <span id="wifi-status" class="badge bg-success">已连接</span>
                            </div>
                            <hr>
                            <div class="d-flex justify-content-between align-items-center">
                                <span>AI 服务</span>
                                <span id="ai-status" class="badge bg-danger">未连接</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="card">
                        <div class="card-header">
                            <i class="fas fa-info-circle"></i> 系统信息
                        </div>
                        <div class="card-body">
                            <p><strong>固件版本:</strong> v1.2.0</p>
                            <p><strong>运行时间:</strong> <span id="uptime">00:00:00</span></p>
                            <p><strong>最后更新:</strong> <span id="last-update">--</span></p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 配置页面 -->
        <div id="config" class="section" style="display: none;">
            <h2><i class="fas fa-cog"></i> 机器人配置</h2>
            <div class="row">
                <div class="col-md-6">
                    <div class="card">
                        <div class="card-header">
                            <i class="fas fa-wifi"></i> Wi-Fi 配置
                        </div>
                        <div class="card-body">
                            <form id="wifi-form">
                                <div class="mb-3">
                                    <label for="wifi-ssid" class="form-label">Wi-Fi 名称</label>
                                    <input type="text" class="form-control" id="wifi-ssid" placeholder="输入Wi-Fi名称">
                                </div>
                                <div class="mb-3">
                                    <label for="wifi-password" class="form-label">Wi-Fi 密码</label>
                                    <input type="password" class="form-control" id="wifi-password" placeholder="输入Wi-Fi密码">
                                </div>
                                <button type="submit" class="btn btn-primary">
                                    <i class="fas fa-save"></i> 保存配置
                                </button>
                            </form>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="card">
                        <div class="card-header">
                            <i class="fas fa-microphone"></i> 语音识别配置
                        </div>
                        <div class="card-body">
                            <form id="voice-form">
                                <div class="mb-3">
                                    <label for="voice-keywords" class="form-label">唤醒关键词</label>
                                    <input type="text" class="form-control" id="voice-keywords" placeholder="Otto, 小智, 机器人">
                                </div>
                                <div class="mb-3">
                                    <label for="voice-sensitivity" class="form-label">识别灵敏度</label>
                                    <input type="range" class="form-range" id="voice-sensitivity" min="1" max="10" value="5">
                                    <div class="form-text">数值越高，识别越敏感</div>
                                </div>
                                <button type="submit" class="btn btn-primary">
                                    <i class="fas fa-save"></i> 保存配置
                                </button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="row mt-3">
                <div class="col-md-6">
                    <div class="card">
                        <div class="card-header">
                            <i class="fas fa-brain"></i> AI 对话配置
                        </div>
                        <div class="card-body">
                            <form id="ai-form">
                                <div class="mb-3">
                                    <label for="ai-endpoint" class="form-label">AI 服务地址</label>
                                    <input type="url" class="form-control" id="ai-endpoint" placeholder="http://api.example.com">
                                </div>
                                <div class="mb-3">
                                    <label for="ai-apikey" class="form-label">API 密钥</label>
                                    <input type="password" class="form-control" id="ai-apikey" placeholder="输入API密钥">
                                </div>
                                <button type="submit" class="btn btn-primary">
                                    <i class="fas fa-save"></i> 保存配置
                                </button>
                            </form>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="card">
                        <div class="card-header">
                            <i class="fas fa-robot"></i> 运动参数
                        </div>
                        <div class="card-body">
                            <form id="motion-form">
                                <div class="mb-3">
                                    <label for="walk-speed" class="form-label">行走速度</label>
                                    <input type="range" class="form-range" id="walk-speed" min="1" max="10" value="5">
                                </div>
                                <div class="mb-3">
                                    <label for="turn-speed" class="form-label">转向速度</label>
                                    <input type="range" class="form-range" id="turn-speed" min="1" max="10" value="5">
                                </div>
                                <button type="submit" class="btn btn-primary">
                                    <i class="fas fa-save"></i> 保存配置
                                </button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 控制页面 -->
        <div id="control" class="section" style="display: none;">
            <h2><i class="fas fa-gamepad"></i> 远程控制</h2>
            <div class="row">
                <div class="col-md-6">
                    <div class="card">
                        <div class="card-header">
                            <i class="fas fa-arrows-alt"></i> 方向控制
                        </div>
                        <div class="card-body">
                            <div class="control-pad">
                                <div class="row mb-2">
                                    <div class="col-4 offset-4">
                                        <button class="btn btn-primary btn-control" data-command="forward">
                                            <i class="fas fa-arrow-up"></i>
                                        </button>
                                    </div>
                                </div>
                                <div class="row mb-2">
                                    <div class="col-4">
                                        <button class="btn btn-primary btn-control" data-command="left">
                                            <i class="fas fa-arrow-left"></i>
                                        </button>
                                    </div>
                                    <div class="col-4">
                                        <button class="btn btn-danger btn-control" data-command="stop">
                                            <i class="fas fa-stop"></i>
                                        </button>
                                    </div>
                                    <div class="col-4">
                                        <button class="btn btn-primary btn-control" data-command="right">
                                            <i class="fas fa-arrow-right"></i>
                                        </button>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-4 offset-4">
                                        <button class="btn btn-primary btn-control" data-command="backward">
                                            <i class="fas fa-arrow-down"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="card">
                        <div class="card-header">
                            <i class="fas fa-magic"></i> 动作库
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-6 mb-2">
                                    <button class="btn btn-success btn-action" data-action="bow">
                                        <i class="fas fa-handshake"></i> 鞠躬
                                    </button>
                                </div>
                                <div class="col-6 mb-2">
                                    <button class="btn btn-success btn-action" data-action="dance">
                                        <i class="fas fa-music"></i> 跳舞
                                    </button>
                                </div>
                                <div class="col-6 mb-2">
                                    <button class="btn btn-success btn-action" data-action="walk">
                                        <i class="fas fa-walking"></i> 行走
                                    </button>
                                </div>
                                <div class="col-6 mb-2">
                                    <button class="btn btn-success btn-action" data-action="turn">
                                        <i class="fas fa-redo"></i> 转身
                                    </button>
                                </div>
                                <div class="col-6 mb-2">
                                    <button class="btn btn-success btn-action" data-action="swing">
                                        <i class="fas fa-child"></i> 摇摆
                                    </button>
                                </div>
                                <div class="col-6 mb-2">
                                    <button class="btn btn-success btn-action" data-action="jump">
                                        <i class="fas fa-arrow-up"></i> 跳跃
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 舞步管理页面 -->
        <div id="dances" class="section" style="display: none;">
            <h2><i class="fas fa-music"></i> 舞步管理</h2>
            <div class="row">
                <div class="col-md-4">
                    <div class="card">
                        <div class="card-header">
                            <i class="fas fa-upload"></i> 上传舞步
                        </div>
                        <div class="card-body">
                            <form id="upload-form">
                                <div class="mb-3">
                                    <label for="dance-file" class="form-label">选择舞步文件 (.json)</label>
                                    <input type="file" class="form-control" id="dance-file" accept=".json">
                                    <div class="form-text">支持 Otto 舞步格式</div>
                                </div>
                                <button type="submit" class="btn btn-primary">
                                    <i class="fas fa-cloud-upload-alt"></i> 上传
                                </button>
                            </form>
                        </div>
                    </div>
                </div>
                <div class="col-md-8">
                    <div class="card">
                        <div class="card-header">
                            <i class="fas fa-list"></i> 舞步列表
                        </div>
                        <div class="card-body">
                            <div id="dance-list" class="dance-list">
                                <div class="text-center text-muted">
                                    <i class="fas fa-music fa-3x mb-3"></i>
                                    <p>暂无舞步文件</p>
                                    <p>请上传 .json 格式的舞步文件</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 状态提示 -->
    <div id="status-toast" class="toast-container position-fixed bottom-0 end-0 p-3">
        <div class="toast" role="alert">
            <div class="toast-header">
                <i class="fas fa-info-circle text-primary me-2"></i>
                <strong class="me-auto">系统提示</strong>
                <button type="button" class="btn-close" data-bs-dismiss="toast"></button>
            </div>
            <div class="toast-body" id="toast-message">
            </div>
        </div>
    </div>

    <script src="https://cdn.bootcdn.net/ajax/libs/bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/socket.io/4.7.2/socket.io.js"></script>
    <script src="js/app.js"></script>
</body>
</html>
